<template>
	<view class="container">
		<!-- 顶部导航 -->
		<nav-bar class="nav-bar" isBack="true"></nav-bar>

		<!-- 音频 -->
		<music ref="music" class="music" :musicSrc="musicSrc" @onTimeUpdate="musicTimeUpdate" size="50"
			:autoplay="true"></music>
		<!-- 占位浮层 -->
		<view v-if="!showPop">
			<!-- 顶部导航 -->
			<view style="height: 118rpx;"></view>
			<!-- 计时器 -->
			<view class="control">
				<!-- 圆环进度 -->
				<circle-progress :percent="percent">
					<!-- 控制板 -->
					<view class="pannel">
						<view class="time-box">
							<view class="min">{{min}}</view>
							<view class="symbol">:</view>
							<view class="sec">{{sec}}</view>
						</view>
					</view>
				</circle-progress>
			</view>

			<!-- 引导歌词 -->
			<music-lyrics :lyrics="musicLyrics" :curTime="musicTime" @centerBtnClick="musicSeekTo"></music-lyrics>
		</view>


		<!-- 底部功能条 -->
		<view class="bar">
			<view :class="['action',musicCount>1 ?'':'unable']" @click="playlist">
				<text class="iconfont icon-yinlezhuanji"></text>
				<text class="txt">音乐</text>
			</view>
			<view :class="['action',current > 0?'':'unable']" @click="resetTime">
				<text class="iconfont icon-chongzhishijian"></text>
				<text class="txt">重置</text>
			</view>
			<view :class="['action',current > 0?'':'unable']" @click="stopZazen">
				<text class="iconfont icon-chan"></text>
				<text class="txt">下座</text>
			</view>
			<view class="action">
				<text class="iconfont icon-fenxiang"></text>
				<text class="txt">分享</text>
			</view>
			<view class="action" @click="backToHome">
				<text class="iconfont icon-fanhui"></text>
				<text class="txt">返回</text>
			</view>
		</view>

		<pop ref="playlist" :width="68" height="100vh" :maskFun="true" direction="left" :is_close="true" :is_mask="true"
			@watchState="popStateChange">
			<scroll-view class="music-playlist" scroll-y="true" @scrolltolower="loadMusic()">
				<view class="item" v-for="(item,index) in musicPlaylist" :key="index">
					<text :class="musicId===item.id?'active':''" @click="playMusic(item.id)">{{item.name}}</text>
				</view>
			</scroll-view>
		</pop>
	</view>
</template>

<script>
	import apiMusic from '@/common/api/music.js'
	export default {
		data() {
			return {
				showPop: false,
				percent: 0,
				current: 0,
				target: 30 * 60,
				min: "00", //计时当前分
				sec: "00", //计时当前秒
				pageNum: 1,
				nomore: false,
				musicTime: 0, //音乐播放当前时间
				musicId: 0,
				musicSrc: "", //当前音乐索引
				musicLyrics: [], //当前音乐配词lrc
				musicPlaylist: [], //音乐列表
				musicCount: 0,
			};
		},
		created() {
			this.startTimer(this.current, this.target)
			this.loadMusic()
			// 保持屏幕常亮
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
		},
		methods: {
			// 返回
			backToHome() {
				uni.navigateBack({
					delta: 2
				})
			},
			// 音频播放时间更新
			musicTimeUpdate(time) {
				// console.log("当前播放时间：", time)
				this.musicTime = time
			},
			// 音频时间跳转
			musicSeekTo(e) {
				// console.log("跳跃播放到：", e.centerTime)
				this.$refs.music.seekAudioTo(e.centerTime)
			},
			popStateChange(state) {
				this.showPop = state
			},
			//背景音效歌单
			playlist() {
				this.$refs.playlist.show()
			},
			playMusic(id) {
				this.musicId = id
				this.loadMusicDetails(id)
				this.$refs.playlist.close()
			},
			// 重置禅坐时间
			resetTime() {

			},
			// 停止禅坐 下座
			stopZazen() {
				this.$refs.music.pauseAudio()
			},
			// 开始计时
			startTimer(cur, tar) {
				this.timer = setInterval(() => {
					cur++
					if (tar > 0 && cur > tar) {
						clearInterval(this.timer)
						return
					}
					var t = tar - cur
					if (tar == 0) {
						t = cur
					}
					var min = parseInt(t / 60);
					if (min < 10) {
						//正计时和倒计时补0
						min = tar == 0 ? "0" + min : min + "0"
					}
					var sec = parseInt(t % 60);
					if (sec < 10) {
						//正计时和倒计时补0
						sec = tar == 0 ? "0" + sec : sec + "0"
					}

					this.min = min
					this.sec = sec
					this.current = cur
					this.percent = cur / tar * 100
				}, 1000)
			},
			// 加载音频
			loadMusic() {
				if (this.nomore) {
					return
				}
				apiMusic.playlistAuido({
					id: "1",
					page: this.pageNum,
				}).then(res => {
					// 递增下一页
					if (res.size > 0) {
						this.musicPlaylist = [...this.musicPlaylist, ...res.list]
						this.musicCount = this.musicPlaylist.length
						// 加载第一章
						if (this.pageNum === 1) {
							this.musicId = this.musicPlaylist[0].id
							this.loadMusicDetails(this.musicId)
						}

						this.pageNum++
					} else {
						this.nomore = true
					}
				}).catch(err => {

				})
			},
			// 章回详情
			loadMusicDetails(id) {
				apiMusic.audioDetails({
					id: id,
				}).then(res => {
					this.musicSrc = res.audioUrl
					if (res.lyrics) {
						this.musicLyrics = res.lyrics.split("\n")
					} else {
						this.musicLyrics = []
					}
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.music {
		&-playlist {
			width: 100%;
			height: 100vh;
			background: rgba(251, 244, 234, 0.9);
			padding: 88rpx 25rpx;

			.item {
				padding: 42rpx 48rpx 0 48rpx;
				font-size: 30rpx;
				text-align: left;
				color: #493129;

				.active {
					font-size: 33rpx;
					font-weight: bold;
				}
			}
		}
	}

	// 音乐
	.music {
		position: fixed;
		top: 158rpx;
		right: 50rpx;
		z-index: 999;
	}

	.control {
		display: flex;
		justify-content: center;
		align-items: center;

		.pannel {
			width: 500rpx;
			height: 500rpx;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			align-items: center;

			.time-box {
				width: 100%;
				height: 188rpx;
				display: flex;
				justify-content: center;
				background: #EEDDCE;

				.min,
				.sec {
					min-width: 150rpx;
					line-height: 188rpx;
					text-align: center;
					font-size: 98rpx;
					font-weight: bold;
					color: #493129;
				}

				.symbol {
					line-height: 158rpx;
					font-size: 128rpx;
					color: #E69B49;
				}
			}
		}
	}


	.bar {
		width: 100%;
		height: 128rpx;
		background: #FBF4EA;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.unable {
			opacity: 0.3 !important;
		}

		.action {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #493129;

			.iconfont {
				font-size: 42rpx;
			}

			.icon-chan {
				font-size: 48rpx;
				color: #E69B49;
			}

			.txt {
				margin-top: 9rpx;
			}
		}
	}
</style>
